<template>
  <div>
    <min-bread :bread="bread"></min-bread>
    <min-table
      :minTable="minTable"
      :cols="cols"
      :minForm="minForm"
      :handleBtn="handleBtn"
      :searchList="searchList"
      :pageInfo="pageInfo"
      @min-operator="handleOperator"
      @min-handle="onHandle"
      @min-search="onSearch"
      @min-switch="onSwitch"
      @min-page="handleCurrentPage"
      @min-size="handlePageSize"
      @min-select="handleSelect"
      @min-select-all="handleSelectAll"
    ></min-table>
    <el-dialog title="添加管理账号" :visible.sync="editShow" width="30%">
      <el-form :model="editForm" label-width="100px" ref="editForm">
        <el-form-item label="账号编码" prop="code">
          <el-input type="text" v-model="editForm.code" class="maxWidth"></el-input>
        </el-form-item>
        <el-form-item label="账号名称" prop="name">
          <el-input type="text" v-model="editForm.name" class="maxWidth"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="fr">
            <el-button @click="editShow=false" class="btnWidth">取消</el-button>
            <el-button type="primary" @click="onConfirm('editForm')" class="btnWidth">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-drawer title="详情" :visible.sync="drawer" direction="rtl" size="80%">
      <user-detail :userDetail="userDetail"></user-detail>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 分页信息
      pageInfo: {
        show: true,
        currentPage: 0,
        total: 0,
        pageSize: 10
      },
      // 封存弹窗
      editShow: false,
      // 封存表单
      editForm: {
        remark: ""
      },
      // 是否打开抽屉
      drawer: false,
      userDetail: {
        baseUserForm: {},
        tableData: [
          {
            date: "123"
          }
        ]
      },
      // 查询栏数组
      searchList: [
        {
          com: "input",
          prop: "categoryName",
          label: "用户名称",
          inputType: "text"
        }
      ],
      // 面包屑
      bread: {
        subTitle: "用户管理"
      },
      // 操作栏数组
      handleBtn: [
        {
          label: "添加"
        }
      ],
      // 表格
      minTable: {
        loading: false,
        tableData: [
          {
            id: 1,
            disName: "王小虎",
            surplusNumber: "王小虎",
            accountNumber: "王小虎",
            anotherNumber: "王小虎",
            remark: false
          },
          {
            id: 3,
            disName: "王小虎",
            anotherNumber: "王小虎",
            accountNumber: "王小虎",
            surplusNumber: "王小虎",
            remark: true
          },
          {
            id: 4,
            disName: "王小虎",
            anotherNumber: "王小虎",
            accountNumber: "王小虎",
            surplusNumber: "王小虎",
            remark: true
          }
        ]
      },
      // 表头数据
      cols: [
        {
          prop: "disName",
          label: "用户名称"
        },
        {
          prop: "accountNumber",
          label: "用户账号"
        },
        {
          prop: "surplusNumber",
          label: "用户信息"
        },
        {
          type: "btn",
          label: "操作",
          width: "300px",
          btnData: [
            {
              type: "text",
              size: "mini",
              iconName: "CP_edit",
              operatTitle: "编辑"
            },
            {
              iconName: "CP_delete",
              style: "color:#FF2C2C;",
              size: "mini",
              type: "text",
              operatTitle: "删除"
            }
          ]
        }
      ],
      // 查询栏表单
      minForm: {},
      // 删除的数据
      delData: [],
      // 封存的渠道商数据
      sealUPData: []
    };
  },
  created() {
    // 初始化数据
    // this.getInfo();
  },
  methods: {
    // 获取数据
    getInfo() {
      let params = {};
      params.disName = this.minForm.categoryName;
      this.minTable.loading = true;
      this.$http
        .post("/distributor/showDistributor", params)
        .then(res => {
          // console.log(res);
          if (res.data.code === "200") {
            this.minTable.tableData = res.data.data;
          } else {
            console.log(res.data.msg);
          }
          this.minTable.loading = false;
        })
        .catch(err => {
          this.minTable.loading = false;
        });
    },
    // 开关变化
    onSwitch(i, row) {
      this.sealUPData.push(row);
      if (i === "1") {
        this.editShow = true;
      } else if (i === "0") {
        this.sealUPData = [];
      }
    },
    // 封存
    submitForm() {
      this.editShow = false;
      let params = {};
      params.disId = this.sealUPData.id;
      params.sealReason = this.editForm.remark;
      this.$http
        .post("/distributor/sealReport", params)
        .then(res => {
          this.sealUPData = [];
          this.editForm = {};
        })
        .catch(err => {});
    },
    beforeEdit(action, instance, done) {
      if (action !== "confirm") {
      }
    },
    // 查询
    onSearch() {
      this.getInfo();
    },
    // 表格按钮操作
    handleOperator(index, row, operatTitle) {
      if (operatTitle === "编辑") {
        // 跳转编辑页面
        // this.$router.push("/addUser");
      } else if (operatTitle === "查看") {
        // 打开查看详情侧边栏
        this.drawer = true;
      } else if (operatTitle === "测评授权") {
        // 跳转测评授权页面
        this.$router.push("/evaluationAuthorization");
      } else {
        this.$confirm("确定要删除吗?", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            let params = {};
            params.id = this.delData;
            this.$http
              .post("/distributor/delDistributor", params)
              .then(res => {
                this.minTable.loading = false;
                if (res.data.code === "200") {
                  this.getInfo();
                } else if (res.data.code === "300") {
                  this.delData = [];
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: "error"
                  });
                }
              })
              .catch(err => {
                this.minTable.loading = false;
                // this.getInfo();
              });
            this.getInfo();
            this.$message.success("删除成功!");
          })
          .catch(() => {});
      }
    },
    // 操作栏操作
    onHandle(i) {
      if (i.label === "添加") {
        this.editShow = true;
      } else if (i.label === "删除") {
        this.minTable.loading = true;
        let params = {};
        params.id = this.delData;
        this.$http
          .post("/distributor/delDistributor", params)
          .then(res => {
            this.minTable.loading = false;
            if (res.data.code === "200") {
              this.getInfo();
            } else if (res.data.code === "300") {
              this.delData = [];
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "error"
              });
            }
          })
          .catch(err => {
            this.minTable.loading = false;
          });
      }
    },
    // 分页事件
    handleCurrentPage(val) {
      console.log(val, "cpage");
    },
    handlePageSize(val) {
      console.log(val, "ppage");
    },
    // 全选
    handleSelectAll(selection) {
      this.delData = selection.map(function(item) {
        return item["id"];
      });
    },
    // 选择事件
    handleSelect(selection, val) {
      this.delData = selection.map(function(item) {
        return item["id"];
      });
    }
  }
};
</script>
<style scoped>
</style>
